<template>
	<view class="content">
		<view class="nav">
			<view class=""
				style="border-bottom: 1px solid #e3e3e3;margin-bottom: 5px;padding: 5px 0;color: #757a84;font-size: 14px;">
				商品
			</view>
			<uni-nav-bar v-if="false">
				<block slot="left">
					<view class="city">
						<uni-icons type="back" color="#666" size="18" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索商品"
						@confirm="confirm" />
				</view>
			</uni-nav-bar>
		</view>
		<view class="goods_content">
			<view class="scroll">
				<!-- 左侧滑动区域 -->
				<scroll-view :style="{height:wh+'px'}" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y left">
					<!-- <ul class="classifyUl" :data-id="item" v-for="item in classifyList" :key="item.id"
						@click="bindToView($event)">
						<li class="scroll-view-item classify goods_category">{{item.classify}}</li>
					</ul> -->
					<ul class="classifyUl" :data-id="index" v-for="(item,index) in goodsList" :key="item.id"
						@click="bindToView($event)">
						<li class="scroll-view-item classify goods_category">{{item.classify}}</li>
					</ul>
				</scroll-view>
				<!-- 右侧滑动区域 -->
				<scroll-view :style="{height:wh+'px'}" :scroll-top="scrollTop" scroll-with-animation="true"
					:scroll-into-view="`_`+toView" scroll-y="true" class="scroll-Y right">
					<swiper style="height: 150px;" :indicator-dots="true" :autoplay="true" :interval="3000"
						:circular="true" :duration="1000">
						<swiper-item v-for="(carousel,index) in carouselImg" :key="index">
							<view class="swiper-item">
								<image :src="'http://localhost:8080/api/img/'+carousel" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="scroll-view-item uni-bg-red goods_list">
						<block v-for="(item,index) in goodsList" :key="index">
							<view class="title" :id="`_`+index">
								{{item.classify}}
							</view>
							<block v-for="(good,i) in item.goods" :key="i">
								<view class="goods_content" @click="showIngredientDialog(good,index,i)">
									<view class="goods_img">
										<image :src="good.imgFile" mode=""></image>
									</view>
									<view class="goods_detail">
										<view class="goods_name">
											{{good.goodsName}}
										</view>
										<view class="goods_description">
											{{good.description}}
										</view>
										<view class="goods_price">
											<view class="price">
												￥<span>{{good.price}}</span>
											</view>
											<view class="goods_num" @click.stop="">
												<view class="count" v-if="count[index][i]">
													<span class="minus" @click="minusNumber(good,index,i)">
														-
													</span>
													<span>{{count[index][i]}}</span>
													<span class="plus" @click="addNumber(good,index,i)">+</span>
												</view>
												<view class="count" v-else>
													<span class="plus" @click="addNumber(good,index,i)">+</span>
												</view>
												<!-- <uni-number-box :value="number" @change="changeValue(good)" /> -->
											</view>
										</view>
									</view>
								</view>
							</block>
						</block>
					</view>

				</scroll-view>
			</view>

		</view>
		<view class="goods_car">
			<uni-badge class="uni-badge-left-margin" :text="carList.length" absolute="rightTop" size="small">
				<image src="../../static/logo.png" mode="" @click="toggle('bottom')"></image>
			</uni-badge>

			<view class="goods_pay">
				<view class="goods_total_price">
					<text class="left">合计</text><text class="mid">￥</text><text class="right">{{totalPrice}}</text>
				</view>
				<button
					:style="{'background-color':!carList.length ?btnColor:'#e60028','color':!carList.length ?'#b9b2ac':'#fff'}"
					:disabled="carList.length==0" size="default" @click="toPay()">{{text}}</button>
			</view>
		</view>
		<view class="dialog" v-show="ingredientDialog">
			<view class="close" @click="closeDialog">
				X
			</view>
			<view class="header">
				<view class="img">
					<image :src="goodInfo.imgFile[0]" mode=""></image>
				</view>
				<view class="goods_detail">
					<view class="name" style="font-size: 18px;">
						{{goodInfo.goodsName}}
					</view>
					<view class="description" style="font-size: 14px; color: #aaaaaa;">
						{{goodInfo.description}}
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true">
				<view>
					<view class="ingredient_content">
						<view class="title">
							加料
						</view>
						<view class="ingredient_detail choice_content">
							<block v-for="(item,index) in choiceList[2]" :key="index">
								<view
									:class="[{'ingredient_name': true, 'choice_detail': true, 'choice': true, 'active': ingredientList.indexOf(item.ingredient)!=-1}]"
									:id="'i'+index" @click="select($event,index)">
									{{item.ingredient}} ￥{{item.price}}
								</view>
							</block>
						</view>
						<view class="title">
							温度
						</view>
						<view class="temperature_content choice_content">
							<block v-for="(item,index) in choiceList[1]" :key="index">
								<view
									:class="[{'temperature_name': true, 'choice_detail': true, 'choice': true, 'active': temi === index}]"
									:id="'t'+index" @click="select($event,index)">
									{{item.temperature}}
								</view>
							</block>
						</view>
						<view class="title">
							糖度
						</view>
						<view class="sweetness_content choice_content">
							<block v-for="(item,index) in choiceList[0]" :key="index">
								<view
									:class="[{'sweetness_name': true, 'choice_detail': true, 'choice': true, 'active': swei === index}]"
									:id="'s'+index" @click="select($event,index)">
									{{item.sweetness}}
								</view>
							</block>
						</view>
					</view>
					<view class="buy_bottom">
						<view v-if="soloPrice!=0" class="left_price" style="margin-left: 10px;">
							￥{{soloPrice}}
						</view>
						<view v-else class="left_price" style="margin-left: 10px;">
							￥{{soloPrice+soloPriceOrigin}}
						</view>
						<view class="right_car">
							<button type="warn" size="mini" @click="addCar()">加入购物车</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部弹出层 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="header">
				<view class="header_left">
					<text>已选商品</text>
				</view>
				<view class="header_right" @click="dialogToggle('warn')">
					<uni-icons type="trash-filled" size="14"></uni-icons>清空
				</view>
			</view>
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="popup_box" v-for="(item,index) in carShowList" :key="index">
					<view class="left">
						<view class="img">
							<image :src="item.imgFile" mode=""></image>
						</view>
						<view class="detail">
							<view class="name">
								{{item.goodsName}}
							</view>
							<view class="description">
								{{item.description}}
							</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
					</view>
					<view class="right">
						<view class="count">
							<span class="minus" @click="carMinus(item,index)">
								-
							</span>
							<span>{{item.count}}</span>
							<span class="plus" @click="carPlus(item,index)">+</span>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="确认清空购物车吗"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// items: ['附近门店'],
				current: 0,
				colorIndex: 0,
				activeColor: '#ff9a00',
				wh: 0,
				scrollTop: 0,
				text: "去结算",
				disabled: "false",
				btnColor: "#f7f7f7",
				classifyList: [], //商品分类
				goodsList: [], //商品数据
				ingredientDialog: false,
				count: [],
				toView: "", //锚点
				carouselImg: [],
				goodInfo: {}, //单个商品数据
				choiceList: [], //全部选项
				temperature: "正常冰", //温度
				sweetness: "正常糖", //甜度
				ingredientList: [], //选择的加料
				size: "中杯",
				temi: 0,
				ingi: "",
				swei: 0,
				carList: [], //购物车数据 用来发送
				carShowList: [], //购物车展示的数据
				outIndex: "", //外层索引 计数器
				innerIndex: "", //内层索引 计数器,
				soloPriceOrigin: 0
			}
		},
		computed: {
			soloPrice() {
				let money = 0;
				if (this.goodInfo.price) {
					money = this.goodInfo.price
				}


				let sel = []
				if (this.choiceList.length > 0) {
					this.choiceList[2].map(item => {
						if (this.ingredientList.indexOf(item.ingredient) != -1) {
							sel.push(item)
						}
					})
					if (sel.length > 0) {
						sel.forEach(item => {
							money += item.price
						})
					}
				}
				return money
			},

			totalPrice() {
				let money = 0
				this.carList.forEach(item => {
					money += item.price
				})
				return money
			}

		},
		onLoad(options) {
			console.log(options, "----------");
			if (options.data) {
				uni.showToast({
					title: "已支付",
					icon: 'success'
				})
			}

			const systemInfo = uni.getSystemInfoSync()
			this.wh = systemInfo.windowHeight - 60
			this.getClassify()
			this.getAllGoods()
			this.getCarousel()
			this.getAllChoice()
		},
		methods: {
			changeValue(value) {
				console.log('返回数值：', value);
			},

			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			//已购弹窗 底部
			toggle(type) {
				if (this.carList.length == 0) return
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},

			//获取轮播图
			async getCarousel() {
				let res = await uni.$http.good.reqGetCarousel()
				this.carouselImg = res.data.images.replace(/\[|\]/g, "").replace(/\s+/g, "").split(",");
			},
			//获取分类
			async getClassify() {
				try {
					let res = await uni.$http.good.reqGetClassify()
					this.classifyList = res.data
				} catch (e) {
					console.log(e);
				}
			},
			//获取商品
			async getAllGoods() {
				let res = await uni.$http.good.reqGetGoods()
				this.goodsList = res.data
				this.formateImgUrl()
				this.count = this.goodsList.map(({
					goods
				}) => {
					return Array(goods.length).fill(0)
				});
			},

			//添加商品数
			addNumber(good, index, i) {
				if (this.goodsList[index].classify !== "奶茶") {
					this.showIngredientDialog(good, index, i)
					return
				}
				this.goodInfo = {}

				Object.assign(this.goodInfo, good)
				this.goodInfo.goodNum = this.carList.length + 1

				this.goodInfo.outIndex = index
				this.goodInfo.innerIndex = i
				this.carList.push(this.goodInfo)
				this.goodInfo = {}
				this.$set(this.count[index], i, this.count[index][i] + 1);
			},

			minusNumber(good, index, i) {
				if (this.goodsList[index].classify !== "奶茶") {
					this.type = "bottom"
					this.$refs.popup.open(this.type)
					return
				}
				let goodindex = ""

				this.carList.forEach((item, index) => {
					if (this.deepCompare(item, good)) {
						goodindex = index
					}
				})
				this.carList.splice(goodindex, 1)
				this.$set(this.count[index], i, this.count[index][i] - 1);
			},

			//显示商品弹窗
			showIngredientDialog(good, index, i) {
				this.outIndex = index
				this.innerIndex = i
				if (good.classify !== "奶茶") {
					this.ingredientDialog = true
					Object.assign(this.goodInfo, good)
					this.soloPriceOrigin = good.price
				}
			},

			//关闭弹窗
			closeDialog() {
				this.goodInfo = {}
				this.ingi = ""
				this.swei = 0
				this.temi = 0
				this.ingredientList = []
				this.ingredientDialog = false
			},

			//锚点定位
			bindToView(event) {
				var id = event.currentTarget.dataset.id;
				this.toView = id;
			},

			//获取全部料
			async getAllChoice() {
				let res = await uni.$http.good.reqGetAllChoice()
				if (res.code == "200") {
					this.choiceList = res.data
				}
			},

			// 添加点击样式
			select(e, i) {
				let eid = e.currentTarget.id.slice(0, 1)
				if (eid == "i") {
					let ingredient = this.choiceList[2][i].ingredient
					if (this.ingredientList.indexOf(ingredient) == -1) {
						this.ingredientList.push(ingredient)
					} else {
						let index = this.ingredientList.indexOf(ingredient)
						this.ingredientList.splice(index, 1)
					}
				} else if (eid == "t") {
					this.temi = i
					this.temperature = this.choiceList[1][i].temperature
				} else {
					this.swei = i
					this.temperature = this.choiceList[0][i].sweetness
				}
			},

			//添加到购物车
			addCar() {
				this.goodInfo.temperature = this.temperature
				this.goodInfo.sweetness = this.sweetness
				this.goodInfo.ingredient = this.ingredientList
				this.goodInfo.goodNum = this.carList.length + 1

				this.goodInfo.price = this.soloPrice
				this.goodInfo.outIndex = this.outIndex
				this.goodInfo.innerIndex = this.innerIndex
				this.carList.push(this.goodInfo)

				this.$set(this.count[this.outIndex], this.innerIndex, this.count[this.outIndex][this.innerIndex] + 1);
				this.closeDialog()
			},

			//清空购物车
			clearCarList() {
				this.carList = []
				this.carShowList = []
				//重置数量
				this.count = this.goodsList.map(({
					goods
				}) => {
					return Array(goods.length).fill(0)
				});
				this.$refs.popup.close()
			},

			//底部减少商品数按钮
			carMinus(good, index) {
				this.carShowList[index].count--
				if (this.carShowList[index].count == 0) {
					this.carShowList.splice(index, 1)
				}
				if (this.carShowList.length == 0) {
					this.$refs.popup.close()
				}

				this.compareAndDelete(this.carList, good)
				console.log(this.carList, "*****carlist============");
				console.log(this.carShowList, "+++++++carShowLIst+++++++");
				this.$set(this.count[good.outIndex], good.innerIndex, this.count[good.outIndex][good.innerIndex] - 1);
			},
			//底部添加商品数按钮
			carPlus(good, index) {
				this.carShowList[index].count++

				delete good.count
				good.goodNum = this.carList.length + 1
				this.carList.push(good)

				this.$set(this.count[good.outIndex], good.innerIndex, this.count[good.outIndex][good.innerIndex] + 1);
			},
			//点击清除 弹窗
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			//清空购物车弹窗确认按钮
			dialogConfirm() {
				this.clearCarList()
			},
			//清空购物车弹窗取消按钮
			dialogClose() {
				console.log('点击关闭')
			},
			//跳转到确认订单页
			toPay() {

				if (!uni.getStorageSync("userInfo").phone) {
					return uni.showToast({
						title: '请先绑定手机号',
						icon: 'none'
					})
				}

				let params = {
					carList: this.carList,
					carShowList: this.carShowList
				}

				uni.navigateTo({
					url: "/packgesB/confirmOrder/confirmOrder?data=" + encodeURIComponent(JSON.stringify(params))
				})
			},

			//比较两对象是否完全相等
			deepCompare(obj1, obj2) {
				if (!obj1 || !obj2) { // 检测传入的对象是否为空，为空则返回 false
					return false;
				}
				// 如果两个对象不是同一个类型，直接返回 false
				if (typeof obj1 !== typeof obj2) {
					return false;
				}
				// 如果这两个对象都是原始类型，直接比较它们的值
				if (typeof obj1 !== 'object') {
					return obj1 === obj2;
				}
				// 对象类型的比较开始
				const keys1 = Object.keys(obj1);
				const keys2 = Object.keys(obj2);
				// 如果两个对象的属性数量不同，直接返回 false
				if (keys1.length !== keys2.length) {
					return false;
				}
				for (let key of keys1) {
					// 如果 obj2 中不存在 obj1 的某个属性，直接返回 false
					if (!Object.prototype.hasOwnProperty.call(obj2, key)) {
						return false;
					}
					// 递归比较这两个属性的值
					if (!this.deepCompare(obj1[key], obj2[key])) {
						return false;
					}
				}
				// 如果所有属性都相等，则返回 true
				return true;
			},

			//计算相同商品
			countEqualPairs(arr) {
				// 创建一个新的数组，用来存储不重复的商品信息
				const goodsArr = [];
				// 创建一个空对象，用来记录新数组中相同对象的个数
				const goodsObj = {};
				arr.forEach(good => {
					// 将 good 中的 goodNum 和 status 属性删除
					const {
						goodNum,
						status,
						...newGood
					} = good;
					// 将剩下的属性组成一个新的 JSON 对象
					const newGoodStr = JSON.stringify(newGood);
					// 如果新数组中没有该对象，则将其添加到新数组中，并将个数设为 1
					if (!goodsObj[newGoodStr]) {
						goodsObj[newGoodStr] = 1;
						goodsArr.push({
							...newGood
						});
					} else {
						// 否则将相同对象的个数加 1
						goodsObj[newGoodStr]++;
					}
				});
				// 将新数组中相同对象的个数保存到 count 属性中
				goodsArr.forEach(good => {
					const goodStr = JSON.stringify(good);
					good.count = goodsObj[goodStr];
				});
				return goodsArr
			},

			//删除carlist中对象
			compareAndDelete(goodsArr, targetObj) {
				// 假设该数组名为 goodsArr，该对象名为 targetObj
				const targetIndex = goodsArr.findIndex(goods => {
					// 判断条件可以忽略 count 和 status 属性
					delete targetObj.count;
					delete targetObj.status;
					delete targetObj.goodNum;
					const goodsCopy = {
						...goods
					};
					delete goodsCopy.count;
					delete goodsCopy.status;
					delete goodsCopy.goodNum
					// 判断两个对象是否完全相等
					return JSON.stringify(goodsCopy) === JSON.stringify(targetObj);
				});
				if (targetIndex !== -1) {
					// 删除数组中一个与目标对象完全相等的元素
					goodsArr.splice(targetIndex, 1);
				}
			},
			//格式化图片路径
			formateImgUrl() {
				this.goodsList.map(item => {
					item.goods.forEach(i => {
						if (i.imgFile !== "" && i.imgFile !== null) {
							i.imgFile = i.imgFile
								.replace(/\[|\]/g, "")
								.replace(/\s+/g, "")
								.split(",");
							i.imgFile.forEach((i, index, arr) => {
								arr[index] = `http://localhost:8080/api/img/` + i;
							});
						}
					})
				})
			}
		},

		watch: {
			carList: {
				handler(newName, oldName) {
					console.log();
					this.carShowList = this.countEqualPairs(newName)
				},
				immediate: true,
				deep: true,
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #f8f8f8;

		.nav {
			// margin-top: 20px;

			.uni-navbar__header-container.data-v-6bda1a90 {
				width: 220px !important;
			}

			.city {
				/* #ifndef APP-PLUS-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				// width: 160rpx;
				margin-left: 4px;
			}

			.input-view {
				/* #ifndef APP-PLUS-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				// width: 500rpx;
				flex: 1;
				background-color: #f8f8f8;
				height: 30px;
				border-radius: 15px;
				padding: 0 15px;
				flex-wrap: nowrap;
				margin: 7px 0;
				line-height: 30px;


			}

			.input-uni-icon {
				line-height: 30px;
			}

			.nav-bar-input {
				height: 30px;
				line-height: 30px;
				/* #ifdef APP-PLUS-NVUE */
				width: 370rpx;
				/* #endif */
				padding: 0 5px;
				font-size: 12px;
				background-color: #f8f8f8;
			}

			.uni-navbar__header .uni-navbar__header-btns .uni-navbar__header-btns-left {
				width: 25px !important;
			}
		}

		.goods_content {
			.scroll {
				// width: 90px;
				display: flex;

				.left {
					width: 120px;
				}

				.right {
					padding: 10px;
					padding-top: 0;

					.swiper-item {
						height: 100%;
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
				}


				.goods_list {
					margin-top: 20px;
					margin-bottom: 30px;

					.title {
						height: 20px;
						font-size: 14px;
						// padding: 15px 5px;
					}

					.goods_content {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.goods_img {
							margin-right: 5px;

							image {
								width: 75px;
								height: 75px;
							}
						}

						.goods_detail {
							display: flex;
							flex-direction: column;

							.goods_name {
								font-size: 16px;
								font-weight: 700;
							}

							.goods_description {
								font-size: 12px;
								color: #bebebe;
							}

							.goods_price {
								padding-top: 10px;
								display: flex;
								justify-content: space-between;

								.price {
									font-size: 12px;

									span {
										font-size: 14px;
									}
								}

								.goods_num {
									.count {
										display: flex;

										span {
											margin: 0 6px;
										}

										.minus {
											width: 25px;
											height: 25px;
											border-radius: 50%;
											font-size: 20px;
											line-height: 22px;
											text-align: center;
											border: 1px solid #e60028;
											color: #e60028;
										}

										.plus {
											width: 25px;
											height: 25px;
											border-radius: 50%;
											font-size: 20px;
											line-height: 22px;
											text-align: center;
											background-color: #e60028;
											border: 1px solid #e60028;
											color: #fff;
										}
									}
								}
							}
						}

					}
				}

				.goods_content:last-child {
					padding-bottom: 50px !important;
				}

			}

			scroll-view {
				.scroll-view-item {
					height: 80px;
				}

				.classifyUl {
					// display: flex;
					// flex-direction: column;
					// align-items: center;
					// justify-content: center;
				}

				.classify {
					text-align: center;
					line-height: 80px;
				}
			}

			.goods_category:last-child {
				padding-bottom: 50px;
			}

			.goods_detail {
				width: 100%;
			}
		}

		.goods_car {
			width: 100%;
			height: 60px;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 999;

			image {
				width: 35px;
				height: 40px;
				margin-left: 10px;
			}

			.goods_pay {
				display: flex;

				.goods_total_price {
					text-align: center;
					line-height: 40px;
					margin-right: 20px;

					.left {
						font-size: 12px;
					}

					.mid {
						font-size: 12px;
						font-weight: 600;
					}

					.right {
						font-size: 16px;
						font-weight: 700;
					}

				}

				button {
					font-size: 14px;
					width: 100px;
					height: 40px;
					margin-right: 10px;
					line-height: 40px;
					color: #b9b2ac;
				}

				button::after {
					border: 1px solid rgba(0, 0, 0, .1);
				}
			}
		}

		.dialog {
			position: fixed;
			z-index: 999;
			width: 83%;
			height: 85%;
			top: 50%;
			left: 50%;
			padding: 10px;
			border-radius: 13px;
			background-color: #fff;
			transform: translate(-50%, -50%);

			.close {
				position: absolute;
				top: 10px;
				right: 13px;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				transform: rotate(50);
				font-size: 20px;
				line-height: 30px;
				text-align: center;
				color: #fff;
				background-color: #cccccc;
			}

			.header {
				display: flex;
				// justify-content: space-between;
				align-items: flex-start;
			}

			.title {
				font-size: 14px;
			}

			.goods_detail {
				// margin-left: 12px;
				margin-right: 80px;

			}

			.choice {
				display: block;
				width: 100px;
				padding: 5px 0;
				border: 1px solid #797978;
				text-align: center;
				border-radius: 8px;
				color: #819a9a;
				font-size: 14px;
			}

			.choice_content {
				display: flex;
				flex-wrap: wrap;
			}

			.choice_detail {
				margin: 5px 10px;
			}

			.active {
				color: #e60012;
				border: 1px solid #e60012;
			}

			.img {
				width: 100px;
				height: 100px;
				border-radius: 10px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.buy_bottom {
				width: 100%;
				position: fixed;
				bottom: 5px;
				left: 0;
				display: flex;
				justify-content: space-between;

				button {
					margin-right: 10px;
				}
			}
		}

		.header {
			margin: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header_left {
				font-size: 17px;
			}

			.header_right {
				font-size: 12px;
				color: #bebebe;
			}

		}

		.popup-content {
			padding-bottom: 60px;

			.popup_box {
				margin: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.left {
				display: flex;

				.img {
					width: 60px;
					height: 60px;
					border-radius: 5px;
					overflow: hidden;
					margin-right: 5px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 16px;
				}

				.description {
					font-size: 12px;
					color: #8e8e8e;
				}
			}

			.right {
				.count {
					display: flex;

					span {
						margin: 0 6px;
					}

					.minus {
						width: 25px;
						height: 25px;
						border-radius: 50%;
						font-size: 20px;
						line-height: 22px;
						text-align: center;
						border: 1px solid #e60028;
						color: #e60028;
					}

					.plus {
						width: 25px;
						height: 25px;
						border-radius: 50%;
						font-size: 20px;
						line-height: 22px;
						text-align: center;
						background-color: #e60028;
						border: 1px solid #e60028;
						color: #fff;
					}
				}
			}
		}
	}
</style>
